<!DOCTYPE html>
<html>
<head>
    <title></title>
    Properties: path            :string
                instance        :set current template to variable of owner scope
                                 Ex: <div template="view" path="myPage.html" instance="myView">
                                            {{myView.viewStack.length}}
                                     </div>
                $currentView    :read only current DOM of view;
                $currentScope   : read only current scope of view;
    Events:on-load-view
    Description: This template will generate Angular Scope base on template in "path". The $$$doClose will be insert to genrated Scope 
    For this template using

    <div template="view" path="[path of template|scope variable store template path]">

    </div>
    Note: root template path depend on ngW8.$("$loader").$setRootTemplate
    ex:
    <div template="view" path="myPage.html">

    </div>
</head>
<body>
    <div ng-transclude style="color:#000">

    </div>
    <script>
        if ($tmp.$a.instance) {
            ngW8.$("$parse")($tmp.$a.instance).assign($tmp.$s, $tmp);
        }
        $tmp.$a.$observe("path", function (v) {
            if (v) {
                
              
                $tmp.loadView(v);
            }
            
        });
        $tmp.viewStack = [];
        $tmp.loadView = function (path) {
            ngW8.$("$loader").$load($tmp.$s, path, function (subScope, ele) {
               
                subScope.$$$doClose = function () {
                    $tmp.$currentView.remove();
                    $tmp.$currentView = $tmp.viewStack[$tmp.viewStack.length - 2].view;
                    $tmp.$currentScope = $tmp.viewStack[$tmp.viewStack.length - 2].scope;

                    $tmp.viewStack = _.filter($tmp.viewStack, function (f) {
                        return $tmp.viewStack.indexOf(f) < $tmp.viewStack.length - 1;
                    });
                    if (!$tmp.viewStack) {
                        $tmp.viewStack = [];
                    }
                    if ($tmp.$a.onLoadView) {
                        $tmp.$s.$eval($tmp.$a.onLoadView)
                    }
                    $tmp.$currentView.show();
                };
                if ($tmp.$currentView) {
                    $tmp.$currentView.hide();
                   
                }
               
                $tmp.$currentView = ele;
                $tmp.$currentScope = subScope;
                if ($tmp.$a.onLoadView) {
                    $tmp.$s.$eval($tmp.$a.onLoadView)
                }
                $tmp.viewStack.push({
                    view: $tmp.$currentView,
                    scope: $tmp.$currentScope
                });
                ele.appendTo($tmp.$e[0]);
            }, true);
        };
    </script>
</body>
</html>
